<template>
	<div class="main">
		<div style="height: 200px;">
      <el-collapse-transition>
			<div v-show="show3">
				<div class="header"></div>
			</div>
		</el-collapse-transition>
    </div>
		<div class="container"></div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			show3: true,
			scrollFalg: null,
		};
	},
	methods: {
		handleScroll() {
			var scrollTop =
				window.pageYOffset ||
				document.documentElement.scrollTop ||
				document.body.scrollTop;
			var scroll = scrollTop - this.i;
			this.i = scrollTop;
			if (scroll < 0) {
				this.show3 = true
			} else {
				this.show3 = false
			}
		},
	},
	mounted() {
		window.addEventListener('scroll', this.handleScroll); // 监听页面滚动
	},
};
</script>

<style scoped>
.main {
	width: 100%;
	border: 1px solid #ccc;
}
.header {
	height: 60px;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	border: 3px solid #ccc;
}
.container {
	height: 3000px;
}
</style>
